<template>
    <basic-container>
        <TitleComponent mainTitle="刷单任务" subTitle="列表" />
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @on-load="onLoad" @select="handleSelect">
            <!-- <template #header="{ row }">
                <el-button type="primary" @click="handleBatchApprove">通过</el-button>
                <el-button type="danger" @click="handleBatchReject">不通过</el-button>
                <el-button type="danger" @click="handleDelete" >批量删除</el-button>
            </template> -->

            <template #menu-left="{ row }">
                <el-button type="success"  size="small" plain icon="el-icon-check" @click="handleBatchApprove">通过</el-button>
                <el-button type="warning"  size="small" plain icon="el-icon-circle-close-filled" @click="handleBatchReject">不通过</el-button>
                <el-button type="danger" size="small" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
            </template>

            <template #test="{ row }">
                <el-button type="success" text="success" link @click="handleClick(row)"> 点击</el-button>
            </template>

            <template #test2="{ row }">
                <el-tag type="success" v-if="row.test2 == '0'"> 已完成</el-tag>
                <el-tag type="primary" v-else-if="row.test2 == '1'"> 待审核</el-tag>
                <el-tag type="info" v-else="row.test2 == '2'"> 未提交</el-tag>
            </template>
            <template #test3="{ row }">
                <!-- <el-avatar shape="square" :size="40" :src="row.test3" /> -->
                <el-image style="width: 50px;" :src="row.test3" :fit="none" />
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { reactive, ref } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import BasicContainer from '@/components/basic-container/main.vue';

let option: any = reactive({
    height: 'auto',
    calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    gridBtn: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    addBtn: false,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    menu: false,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: true,
    searchShowBtn: false,
    indexWidth: 60,
    column: [
        {
            label: "手机号",
            prop: "phone",
            // search: true,
            span: 24,
        },
        {
            label: "任务名称",
            prop: "mission",
            span: 24,
        },
        {
            label: "任务ID",
            prop: "missionid",
            span: 24,
        },
        {
            label: "链接",
            prop: "test",
            span: 24,
        },
        {
            label: "佣金",
            prop: "test1",
            span: 24,
        },
        {
            label: "状态",
            prop: "test2",
            span: 24,
        },
        {
            label: "凭证",
            prop: "test3",
            span: 24,
        },
        {
            label: "创建时间",
            prop: "test4",
            // search: true,
            span: 24,
        },
    ]
})

let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: [],
    selectedData: [] // 存储选中的数据
})


const handleClick = (row) => {
    window.open(row.test, '_blank');
}


// 处理用户选择数据行的事件
const handleSelect = (selection,row) => {
  // 将选中的行添加到 selectedRows 数组中
  console.log('selection',selection);
  console.log('row',row);
  
  crudData.selectedData.push(row);
};

// 处理批量审核
const crud = ref();

const handleBatchApprove = () => {

    console.log('crudData.selectedData',crudData.selectedData);
    
    console.log(11111);

    console.log('通过',crudData.selectedData.map(item => item.phone).join(","))
    // alert('批量审核通过完成');
    // if (crud.value) {
    //     const selectedRows = crud.toggleRowSelection();
    //     selectedRows.forEach(row => {
    //         row.test2 = '0'; // 将状态更新为已完成
    //         console.log('通过')
    //     });
    //     // 添加 API 调用，将状态更新发送到服务器
    //     alert('批量审核通过完成');
    // } else {
    //     console.error('CRUD component is not mounted yet');
    // }
};

const handleBatchReject = () => {
    // if (crud.value) {
    //     const selectedRows = crud.toggleSelection();
    //     selectedRows.forEach(row => {
    //         row.test2 = '2'; // 将状态更新为失败
    //         console.log('不通过')
    //     });
    //     // 添加 API 调用，将状态更新发送到服务器
    //     alert('批量审核不通过完成');
    // } else {
    //     console.error('CRUD component is not mounted yet');
    // }
};

// 批量删除


const handleDelete = async () => {
  const selectionList = crudData.selectedData; // Assuming getSelectionRows is available
  console.log('删除前',selectionList);
  
  if (!selectionList || selectionList.length === 0) {
    ElMessage.warning("请选择至少一条数据");
    return;
  }

  try {
    await ElMessageBox.confirm("确定将选择的数据删除?", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    const ids = selectionList.map(item => item.id).join(",");
    // Assuming `remove` is a function to delete data
    // await remove(ids);

    // Reload the data or refresh the view
    onLoad();
    ElMessage.success("操作成功!");
    // Assuming toggleSelection can clear selection
    crudData.selectedData=[];
    console.log('删除后',crudData.selectedData);
    
  } catch (error) {
    if (error !== 'cancel') {
      console.log('Error:', error);
    }
  }
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            phone: '662303',
            mission: 'youtube',
            missionid: '6093',
            test: 'https://www.youtube.com/shorts/zSceLG3yXe8?feature=share',
            test1: '2.00',
            test2: '0',
            test3: 'https://jumptra.vip//uploads/images/202407/05/zqGgn43m6wFVhYvzGByrWzUXqXyy9CIUVYZiusnJ.jpg',
            test4: '2024-07-05 07:41:19',
        },
        {
            phone: '4672303',
            mission: 'youtube',
            missionid: '6092',
            test: 'https://www.youtube.com/shorts/zSceLG3yXe8?feature=share',
            test1: '2.00',
            test2: '1',
            test3: 'https://jumptra.vip//uploads/images/202406/24/Ln1W2E02pD4PEdkAtONG0aOM4kybwRs9mwY3LA48.jpg',
            test4: '2024-07-05 07:41:19',
        },
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //     // crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss"></style>